<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'sys';
            src: url('./assest/font/ChillRoundGothic_Regular.ttf') format('woff2');
        }
        @font-face {
            font-family: 'custom';
            src: url('./assest/font/字制区喜脉喜欢体.ttf') format('woff2');
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'sys', sans-serif;
        }
        body{
            background-color: #0B1D26;
        }
        .header{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 120px;
            color: white;
            position: absolute;
            top: 20px;
            z-index: 11;
            transition: 0.4s;
        }
        .header .h-left {
            font-size: 24px;
            letter-spacing: 3px;
        }
        .header .h-middle {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            font-size: 12px;
            letter-spacing: 1px;
        }
        .header .h-middle .h-m-item {
            cursor: pointer;
        }
        .header .h-middle .h-m-item:hover {
            color: #e4882e;
            transition: 0.2s;
        }
        .header .h-right {
            font-size: 14px;
            letter-spacing: 1px;
        }

        .all-container {
            width: 100%;
            height: auto;
            position: relative;
        }
        .back-sky, .back-mon,.back-people{
            width: 100%;
            height: auto;
            position: absolute;
        }
        .back-sky {
            z-index: 7;
            top: -350px;
            transition: 0.5s;
        }
        .back-mon {
            z-index: 8;
            top: 180px;
            transition: 0.6s;
        }
        .back-people {
            z-index: 12;
            top: 400px;
            transition: 0.9s;
        }
        .back-people img {
            width: 100%;
            height: auto;
        }
        .back-people div {
            width: 100%;
            height: 330px;
            position: absolute;
            top: 590px;
            background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(11, 29, 38, 1) 50%);
        }
        .all-container .back1{
            width: 100%;
            height: 80vh;
            background: linear-gradient(-12.59deg, rgba(255, 255, 255, 0) 30%, rgba(11, 29, 38, 0.9) 100%);
            position: absolute;
            z-index: 10;
            top: 0;
        }

        .text-container {
            position: absolute;
            width: 600px;
            height: 200px;
            top: 20%;
            left: calc(50% - 300px);
            z-index: 11;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            transition: 0.5s;
        }
        .text1-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: #e4882e;
            font-size: 11px;
        }
        .text-container .bar {
            width: 60px;
            height: 1.5px;
            background-color: #e4882e;
        }
        .text-container .text1 {
            letter-spacing: 3px;
        }
        .text-container .text2 {
            font-size: 60px;
            font-family: 'custom', sans-serif;
            color: white;
            letter-spacing: 2px;
        }
        .text-container .text3 {
            letter-spacing: 3px;
            font-size: 12px;
            color: white;
        }
        .filler {
            width: 100%;
            height: 145vh;
            background-color: #0B1D26;
            z-index: 13;
            transition: 0.9s
        }




        .scroll-bar {
            position: fixed;
            top: 50%;
            right: 4%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            transition: 0.2s;
            z-index: 20;
        }
        .scroll-bar .item {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }
        .scroll-bar .item .text {
            font-size: 12px;
            color: white;
        }
        .scroll-bar .item .bar {
            width: 4px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.5);
        }
        .scroll-bar .item .first {
            border-radius: 2px 2px 0 0;
         }
        .scroll-bar .item .end {
            border-radius: 0 0 2px 2px;
        }


        .article{
            z-index: 9;
            width: 100%;
            color: white;
            margin-bottom: 240px;
        }
        .article .container{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 150px;
        }
        .article .container .left{
            position: relative;
            width: 500px;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 32px;
        }
        .article .container .left .number{
            top: -60px;
            left: -80px;
            color: rgba(255, 255, 255, 0.3);
            font-size: 150px;
            position: absolute;
            z-index: 9;
        }
        .article .container .left .text1{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 40px;
            color: #e4882e;
            z-index: 10;
        }
        .article .container .left .text1 .bar{
            width: 80px;
            height: 1.5px;
            background-color: #e4882e;
            z-index: 10;
        }
        .article .container .left .text1 .text{
            font-size: 13px;
            letter-spacing: 3px;
        }
        .article .container .left .text2{
            font-size: 50px;
            line-height: 65px;
            font-weight: bold;
            letter-spacing: 5px;
            z-index: 10;
        }
        .article .container .left .text3{
            font-size: 14px;
            letter-spacing: 2px;
            line-height: 25px;
        }
        .article .container .left .text4{
            font-size: 15px;
            letter-spacing: 1px;
            color: #e4882e;
        }
        .article .container .right{
            width: 400px;
            height: auto;
        }



        .footer{
            z-index: 9;
            width: 100%;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            margin-top: 300px;
            margin-bottom: 100px;
        }
        .footer .part1{
            display: flex;
            flex-direction: column;
            gap: 35px;
            margin-right: 90px;
        }
        .footer .part1 .logo{
            font-size: 30px;
            letter-spacing: 3px;
        }
        .footer .part1 .text{
            font-size: 22px;
            line-height: 30px;
            letter-spacing: 2px;
            width: 320px;
            margin-bottom: 50px;
            font-family: 'custom', sans-serif;
        }
        .footer .part1 .publish{
            font-size: 13px;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.5);
        }
        .footer .part2{
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .footer .part2 .title{
            font-size: 17px;
            line-height: 25px;
            letter-spacing: 1px;
            color: #e4882e;
        }
        .footer .part2 .text{
            font-size: 14px;
            display: flex;
            flex-direction: column;
            letter-spacing: 1px;
            gap: 22px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }
        .footer .part2 .text div{
            transition: 0.2s;
        }
        .footer .part2 .text div:hover{
            color: #d89551;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="h-left">GaDan</div>

        <div class="h-middle">
            <div class="h-m-item">设备器材</div>
            <div class="h-m-item">关于我们</div>
            <div class="h-m-item">博客</div>
        </div>

        <div class="h-right">欢迎来访!</div>
    </div>

    <div class="text-container">
        <div class="text1-container">
            <div class="bar"></div>
            <div class="text1">徒步向导</div>
        </div>


        <div class="text2">为山脉和更远的地方做好准备!</div>
        <div class="text3">向下滚动&nbsp;↓</div>
    </div>

    <div class="all-container">
        <div class="back1"></div>
        <img src="./assest/imgs/img/sky.png" alt="" class="back-sky">
        <img src="./assest/imgs/img/mon.png" alt="" class="back-mon">
        <div class="back-people">
            <img src="./assest/imgs/img/people.png" alt="">
            <div></div>
        </div>

    </div>

    <div class="scroll-bar">
        <div class="item">
            <div class="text">Start</div>
            <div class="bar first"></div>
        </div>

        <div class="item">
            <div class="text">01</div>
            <div class="bar"></div>
        </div>

        <div class="item">
            <div class="text">02</div>
            <div class="bar"></div>
        </div>

        <div class="item">
            <div class="text">03</div>
            <div class="bar end"></div>
        </div>
    </div>

    <div class="filler"></div>

    <div class="article">
        <div class="container">
            <div class="left">
                <div class="number">01</div>
                <div class="text1">
                    <div class="bar"></div>
                    <div class="text">开始</div>
                </div>
                <div class="text2">你是什么级别的徒步旅行者？</div>
                <div class="text3">在规划未来的徒步旅行时，确定你的徒步旅行水平可能是一个重要的工具。这份徒步旅行级别指南将帮助您根据各种网站（如All Trails和Modern Hiker）设置的不同徒步旅行评级来计划徒步旅行。你是哪种类型的徒步旅行者——新手、中等、高级、中等、专家还是背包客？</div>
                <div class="text4">阅读更多&nbsp;&nbsp;&nbsp;&nbsp;→</div>
            </div>

            <img src="./assest/imgs/img/article1.png" class="right" alt="">
        </div>
    </div>
    <div class="article">

        <div class="container">
            <img src="./assest/imgs/img/article2.png" class="right" alt="">
            <div class="left">
                <div class="number">02</div>
                <div class="text1">
                    <div class="bar"></div>
                    <div class="text">徒步必备</div>
                </div>
                <div class="text2">选择正确的徒步装备！</div>
                <div class="text3">开始徒步旅行的好处是，你真的不需要任何特殊的装备，你可能会得到你已经拥有的东西。<br>
                    让我们从衣服开始。徒步旅行初学者犯的一个典型错误是穿牛仔裤和普通衣服，如果他们出汗或淋湿，衣服会变得很重，会擦伤妻子。</div>
                <div class="text4">阅读更多&nbsp;&nbsp;&nbsp;&nbsp;→</div>
            </div>
        </div>
    </div>
    <div class="article">

        <div class="container">
            <div class="left">
                <div class="number">03</div>
                <div class="text1">
                    <div class="bar"></div>
                    <div class="text">你去哪里是关键</div>
                </div>
                <div class="text2">了解您的地图和时间安排</div>
                <div class="text3">首先，打印出徒步旅行指南和地图。如果下雨，把它们放在拉链袋里。阅读指南，研究地图，并对预期有一个很好的想法。当我徒步旅行时，我想知道我的下一个里程碑是什么。例如，我会阅读指南，知道在一英里后，我在路口右转.</div>
                <div class="text4">阅读更多&nbsp;&nbsp;&nbsp;&nbsp;→</div>
            </div>

            <img src="./assest/imgs/img/article3.png" class="right" alt="">
        </div>
    </div>

    <div class="footer">
        <div class="part1">
            <div class="logo">GaDan</div>
            <div class="text">走出去，发现你的下一个斜坡、山脉和目的地！</div>
            <div class="publish">Copyright © 2023 GaDan. All rights reserved.</div>
        </div>

        <div class="part2">
            <div class="title">博客上的更多信息</div>
            <div class="text">
                <div>关于GaDan</div>
                <div>投稿人和撰稿人</div>
                <div>为我们写作</div>
                <div>联系我们</div>
                <div>隐私政策</div>
            </div>
        </div>

        <div class="part2">
            <div class="title">关于GaDan的更多信息</div>
            <div class="text">
                <div>团队</div>
                <div>工作</div>
                <div>报刊</div>
            </div>
        </div>

    </div>

<script>
    const header = document.querySelector('.header');
    const textContainer = document.querySelector('.text-container');
    const backSky = document.querySelector('.back-sky');
    const backMon = document.querySelector('.back-mon');
    const backPeople = document.querySelector('.back-people');
    const body = document.querySelector('body');

    // 所有元素
    const boms = [backSky, backMon, backPeople, textContainer, header, body];

    //移动信号量
    const status = {
        textContainer: 0,
        header: 0,
        backSky: 0,
        backMon: 0,
        backPeople: 0
    }

    let allAnimationsFinished = false; // 标志位，用于判断是否所有动画已完成

    window.addEventListener('wheel', function(e) {
        if (!allAnimationsFinished) { // 如果动画未完成，则阻止默认行为
            e.preventDefault();
        }
        if (window.scrollY === 0){
            allAnimationsFinished = false;
        }

        // 计算增量
        let delta = e.deltaY;

        // .text-container Y轴移动计算
        let textContainerTransform = parseInt(textContainer.style.transform.split('(')[1]) || 0;
        let newTranslateYTextContainer = Math.max(-640, Math.min(0, textContainerTransform - delta * 3));
        let newOpacityTextContainer = Math.max(0, Math.min(1, 1 - Math.abs(newTranslateYTextContainer) * 0.01));

        if (newTranslateYTextContainer === -640){status.textContainer = 1;}

        textContainer.style.transform = `translateY(${newTranslateYTextContainer}px)`;
        textContainer.style.opacity = String(newOpacityTextContainer);

        // .header X轴移动计算
        let headerTransform = parseInt(header.style.transform.split('(')[1]) || 0;
        let newTranslateYHeader = Math.max(-105, Math.min(0, headerTransform - delta * 0.5));
        let newOpacityHeader = Math.max(0, Math.min(1, 1 - Math.abs(newTranslateYHeader) * 0.01));

        if (newTranslateYHeader === -105){status.header = 1;}


        header.style.transform = `translateX(${newTranslateYHeader}px)`;
        header.style.opacity = String(newOpacityHeader);


        // .back-sky Y轴0.5倍移动计算
        let backSkyTransform = parseInt(backSky.style.transform.split('(')[1]) || 0;
        let newTranslateYBackSky = Math.max(-300, Math.min(0, backSkyTransform - delta * 0.5));

        // .back-mon Y轴0.2倍移动计算
        let backMonTransform = parseInt(backMon.style.transform.split('(')[1]) || 0;
        let newTranslateYBackMon = Math.max(-120, Math.min(0, backMonTransform - delta * 0.2));

        // .back-people Y轴0.2倍移动计算
        let backPeopleTransform = parseInt(backPeople.style.transform.split('(')[1]) || 0;
        let newTranslateYBackPeople = Math.min(50, Math.max(0, backPeopleTransform + delta * 0.2));

        if (newTranslateYBackPeople === 50 && newTranslateYBackMon === -120 && newTranslateYBackSky === -300){
            status.backSky = 1;
            status.backMon = 1;
            status.backPeople = 1;
        }else {
            status.backSky = 0;
            status.backMon = 0;
            status.backPeople = 0;
        }

        // 背景图移动
        if (status.textContainer === 1 && status.header === 1){
            backSky.style.transform = `translateY(${newTranslateYBackSky}px)`;
            backMon.style.transform = `translateY(${newTranslateYBackMon}px)`;
            backPeople.style.transform = `translateY(${newTranslateYBackPeople}px)`;
        }

        // 更新状态部分...
        if (status.backSky === 1 && status.backMon === 1 && status.backPeople === 1 && status.textContainer === 1 && status.header === 1){
            allAnimationsFinished = true; // 所有动画完成
        }
    }, {passive: false});

    // 添加监听器以检测动画结束并允许页面滚动
    document.addEventListener('scroll', function() {
        if (allAnimationsFinished) {}
    }, {passive: true});

</script>
</body>
</html>
